<template>
	<view class="phone">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>换绑手机</custom-navi>
		<view class="phone-step">
			<image src="/static/richTxt/jdt1.png" mode="" v-if="tag=='0'"></image>
			<image src="/static/richTxt/jdt2.png" mode="" v-else></image>
			<!-- <view class="phone-step-lest">
				<view class="txt">验证原手机号</view>
				<view class="circle" :class="{pitch:tag=='0'}">1</view>
				<view class="line" :class="{pitch:tag=='0'}"></view>
			</view>
			<view class="phone-step-lest">
				<view class="txt">绑定新手机号</view>
				<view class="circle" :class="{pitch:tag=='1'}">2</view>
				<view class="lines" :class="{pitch:tag=='1'}"></view>
			</view> -->
		</view>
		<view class="phone-verify">
			<view class="phone-verify-phone">
				<image src="/static/myicon/sj.png" mode=""></image>
				<input type="number" :value="phone" placeholder="请输入手机号" :disabled="tag=='0'? true:false" @input="phoneTxt"/>
				<view class="code" @click="codeBtn">
					{{codeTitle}}
				</view>
			</view>
			<view class="phone-verify-code">
				<image src="/static/myicon/yzm.png" mode=""></image>
				<input type="number" :value="code" placeholder="短信验证码" @input="codeTxt"/>
			</view>
		</view>
		<view class="phone-verifyBtn" @click="verifyBtn" :class="{'veriys':code!='' && phone!=''}">
			{{tag=='0'? '下一步' : '完成'}}
		</view>
	</view>
</template>

<script>
	import { getCode,testOriginalPhone,bindingOriginalPhone } from "../../../api.js"
	export default {
		data(){
			return{
				tag:'0',
				shopInfo:'',
				phone:'',
				code:'',
				codeTitle:'获取验证码',
				codeDisabled:true,
				encryptionValue:'',
				timer:null,
			}
		},
		onLoad() {
			const _self = this
			uni.getStorage({
			  key: 'shopInfo',
			  success: function (res) {
			    _self.shopInfo = res.data
				_self.phone = res.data.phone
			  }
			});
			console.log(_self.shopInfo)
		},
		methods:{
			phoneTxt(e){
				this.phone=e.detail.value
			},
			codeTxt(e){
				this.code=e.detail.value
			},
			async verifyBtn(){
				if(this.code!=''){
					if(this.tag=='0'){
						const params = {
							code:this.code,
							phone:this.phone,
						}
						try {
						  const data = await testOriginalPhone(params);
						  console.log(data)
						  this.encryptionValue = data.data
						  this.tag='1'
						  this.phone=''
						  this.code=''
						  clearInterval(this.timer)
						  this.codeTitle = "获取验证码"
						  this.codeDisabled = true
						} catch (err) {
						  if (err.code !== 200) {
						    this.$utils.common.toast.fail(err.message);
						  }
						}
					}else{
						const params = {
							code:this.code,
							phone:this.phone,
							encryptionValue:this.encryptionValue
						}
						try {
						  const data = await bindingOriginalPhone(params);
						  console.log(data)
						  this.$utils.common.toast.fail("改绑成功");
						  setTimeout(() => {
						    return this.$utils.common.navigateBack()
						  }, 1000)
						} catch (err) {
						  if (err.code !== 200) {
						    this.$utils.common.toast.fail(err.message);
						  }
						}
					}
				}
				
			},
			async codeBtn () {
				if(this.codeDisabled==true){
					this.codeDisabled = false
					try {
					  const data = await getCode(this.phone);
					  console.log(data)
					  let s = 60;
					   this.timer = setInterval(() => {
					    if (s <= 0) {
					      clearInterval(this.timer)
					      this.codeTitle = "重新获取"
					      this.codeDisabled = true
					      return
					    }
					    s -= 1;
					    this.codeTitle = `${s}s后重新获取`
					  }, 1000)
								
					} catch (err) {
					  if (err.code !== 200) {
					    return this.$utils.common.toast.fail(err);
					  }
					}
				}else{
					
				}
			  
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.phone{
		height: 100vh;
		background-color: rgba(243, 244, 248, 1);
		&-step{
			width:100%;
			height:166rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			image{
				width: 100%;
				height: 100%;
			}
			
		}
		&-verify{
			margin-top: 20rpx;
			&-phone{
				padding: 32rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid rgba(217, 217, 217, 1);
				image{
					width: 32rpx;
					height: 32rpx;
				}
				input{
					padding-left: 20rpx;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(80,80,80,1);
					opacity:1;
				}
				.code{
					margin-left: 20rpx;
					background:rgba(247,247,247,1);
					border:1rpx solid rgba(229,229,229,1);
					opacity:1;
					border-radius:4rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(80,80,80,1);
					padding: 8rpx 10rpx;
					margin-left: auto;
				}
			}
			&-code{
				padding: 32rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				input{
					padding-left: 20rpx;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(80,80,80,1);
					opacity:1;
				}
			}
		}
		.veriys{
			
			opacity:1;
		}
		&-verifyBtn{
			width:686rpx;
			height:88rpx;
			margin: 0 auto;
			background:rgba(0, 144, 250, 1);
			opacity:0.64;
			border-radius: 8rpx;
			margin-top: 82rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 88rpx;;
			font-size:34rpx;
			font-family:PingFang SC;
			font-weight:500;
			
		}
	}
		
	
</style>
